<template>
  <div>

	<myheader></myheader>
	

	<section class="cart text-center">
		<div class="container">
			<div class="row">
				<div class="col-sm-6 mb-3 mb-m-1 text-md-left"><a href="catalog.html"><i class="fas fa-arrow-left mr-2"></i> Continue Shopping</a></div>
				<div class="col-sm-6 text-md-right"><a href="catalog.html" class="btn btn-primary btn-lg pl-5 pr-5">Checkout</a></div>
			</div>
			<div class="row">
				<div class="col-12 text-center">
					<h2 class="mt-5 mb-2">购物车</h2>
					<p class="mb-5"><span class="primary-color">{{totalcount}}</span> 件商品</p>
					<table id="cart" class="table table-condensed" >
						<thead>
							<tr>
								<th style="width:60%">商品名称</th>
								<th style="width:12%">商品价格</th>
								<th style="width:10%">商品数量</th>
								<th style="width:16%"></th>
							</tr>
						</thead>
						<tbody>
							<tr v-for="(item,index) in cartlist" :key="index">
								<td data-th="Product">
									<div class="row">
										<div class="col-md-3 text-left">
											<img :src="item.img" alt="" class="img-fluid">
										</div>
										<div class="col-md-9 text-left mt-sm-2">
											<h4>{{ item.name }}</h4>
										</div>
									</div>
								</td>
								<td data-th="Price">${{item.price/100}}</td>
								<td data-th="Quantity">
									<input type="number" class="form-control text-center" v-model="item.num">
								</td>
								<td class="actions" data-th="">
									<div class="text-right">
										<button class="btn btn-white btn-md mb-2" @click="changenum(index,'-')">-</button>
										<button class="btn btn-white btn-md mb-2" @click="changenum(index,'+')">+</button>
									</div>
								</td>
							</tr>
						</tbody>
					</table>
					<div class="float-right text-right">
						<h4>总价:</h4>
						<h1>${{ totalprice }}</h1>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-sm-6 mb-3 mb-m-1 text-md-left"><a href="catalog.html"><i class="fas fa-arrow-left mr-2"></i> Continue Shopping</a></div>
				<div class="col-sm-6 text-md-right"><a href="catalog.html" class="btn btn-primary btn-lg pl-5 pr-5">Checkout</a></div>
			</div>
		</div>
	</section>
	
	<footer></footer>	
    
  </div>
  
</template>


 
<script>
import myheader from './myheader';
import myfooter from './myfooter';

export default {
  data () {
    return {
	  msg: "这是一个变量",
	  cartlist:[],
	  totalprice:0,
	  totalcount:0
    }
  },
  components:{
		'myheader':myheader,
		'myfooter':myfooter,
    },
  mounted:function(){
	this.init_cart();
	if(localStorage.getItem("cart")){
			//将localstorage的数据赋给cartlist
			this.cartlist = JSON.parse(localStorage.getItem("cart"));
			//计算价格
			for(let i=0,l=this.cartlist.length;i<l;i++){

				this.totalprice += (this.cartlist[i].num * this.cartlist[i].price/100);
			}
			//计算购物车总数
			for(let i=0,l=this.cartlist.length;i<l;i++){

				this.totalcount += this.cartlist[i].num;
			}
		}else{
			this.cartlist = []
		}
  
},
  methods:{
	//删除整行逻辑
  	delete_one:function(index){
  		this.cartlist.splice(index,1);
  	},
	//增加数量
  	changenum:function(index,type){

  		if(type=="+"){

	  		//累加操作
	  		this.cartlist[index].num++;

  		}else{

  			if(this.cartlist[index].num > 1){
  			//减法
  			this.cartlist[index].num--;

  			}else{

  				this.delete_one(index);

  			}

  		}

  		//状态续存
  		localStorage.setItem("cart", JSON.stringify(this.cartlist));


  	},
	//初始化购物车逻辑
  	init_cart:function(){
		if(localStorage.getItem("cart")){
			//将localstorage的数据赋给cartlist
			this.cartlist = JSON.parse(localStorage.getItem("cart"));
		}else{
			this.cartlist = []
		}	
		console.log(this.cartlist)
  	},  
  }
}


</script>
 
<style>



</style>